const style = {
  photoBox: {
    width: 387,
    height: 548,
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: "space-between",
    borderRadius: 3,
    borderLeftWidth: 5,
    borderRightWidth: 5,
    borderColor: "#fff"
  },

  photoImg: {
    width: 375,
    height: 300,
    backgroundColor: '#4fa4c2',
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: "space-between",
    borderWidth: 1,
    borderTopWidth: 0,
    borderRadius: 3,
    borderColor: "#4fa4c2"
  },

  photoItem: {
    width: 124,
    height: 100,
    marginTop: 1,
    backgroundColor: '#333',
    fontSize: 20,
    color: "#fff",
    borderRadius: 2,
  },

  iconBox: {
    width: 124,
    height: 100,
  },

  icon: {
    width: 124,
    height: 100,
  },

  empty: {
    width: 124,
    height: 100,
    backgroundColor: '#fff',
  },

  textBoxName: {
    paddingLeft: 2,
    paddingright: 2,
    width: 375,
    height: 20,
    backgroundColor: '#fff',
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: "space-between",
  },

  valName: {
    width: 375,
    height: 20,
    fontSize: 12,
    lineHeight: 20,
    textAlign: "left",
    color: "#333",
    backgroundColor: '#fff',
  },

  textBox: {
    paddingLeft: 2,
    paddingright: 2,
    width: 375,
    height: 16,
    backgroundColor: '#fff',
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: "space-between",
  },

  photoText: {
    width: 92,
    height: 16,
    fontSize: 12,
  },

  val: {
    width: 92,
    height: 16,
    fontSize: 12,
    lineHeight: 16,
    textAlign: "left",
    color: "#333",
  },

  infoBox: {
    paddingLeft: 2,
    paddingright: 2,
    width: 375,
    height: 20,
    fontSize: 12,
    lineHeight: 20,
    textAlign: "left",
    color: "#333",
    backgroundColor: "#fff"
  },

  infoText: {
    width: 371,
    height: 18,
    fontSize: 10,
    lineHeight: 18,
    textAlign: "left",
    color: "#333",
  },
}

/**
 * 截图样式
 * @param {*} defaultArr 默认图片
 * @param {*} twelveArr 十二宫格剩余图片
 * @param {*} aspectRatio 正方形-square/长方形-narrow
 * @param {*} pictureNum 九宫格-nine/十二宫格-twelve
 */
const wxmlFn = (defaultArr, twelveArr, data, aspectRatio, pictureNum) => {
  const itemHeight = aspectRatio == 'square' ? 100 : 60
  const wxmlObj = {
    wxml: '',
    style,
  }
  let wxml = ``
  let defaultHtml = "";
  defaultArr.forEach((item, index) => {
    const urlKey = aspectRatio + "Url";
    const url = item[urlKey];
    const imageHtml = url ? `<image src="${ url }" mode="" class="icon" />` : '';
    defaultHtml += `<view class="photo-item">
      <view class="icon-box">
        ${ imageHtml }
      </view>
    </view>`
  })

  let twelveHtml = "";
  if (pictureNum == 'twelve') {
    // 十二宫格
    twelveArr.forEach((item) => {
      const urlKey = aspectRatio + "Url";
      const url = item[urlKey];
      const imageHtml = url ? `<image src="${ url }" mode="" class="icon" />` : '';
      const iconBox = item.type ? `<view class="icon-box">${ imageHtml }</view>` : `<view class="empty"></view>`
      twelveHtml += `<view class="photo-item">
        ${ iconBox }
      </view>`
    })

    style.photoImg.height = itemHeight * 4 + 5;
    // style.photoBox.height = style.photoImg.height + 36;
    style.photoItem.height = itemHeight;
    style.iconBox.height = itemHeight;
    style.icon.height = itemHeight;
    style.empty.height = itemHeight;
  } else {
    style.photoImg.height = itemHeight * 3 + 4;
    // style.photoBox.height = style.photoImg.height + 36;
    style.photoItem.height = itemHeight;
    style.iconBox.height = itemHeight;
    style.icon.height = itemHeight;
    // debugger
  }

  const inforName = data.nameVal.replace(/\n/g, " ")
  const inforNameArr = drawMultilineText(inforName, 10, 92);
  let inforNameHtml = ``;
  if (inforNameArr.length) {
    inforNameArr.forEach((item, index) => {
      inforNameHtml += `<text class="val">${ item }</text>`;
    })
  }
  const nameVal = data.nameVal ? `<view class="photo-text name"><text class="val">${ data.nameVal }</text></view>` : ``;
  const idVal = data.idVal ? `<view class="photo-text idcard"><text class="val">${ data.idVal }</text></view>` : ``;
  const ageVal = data.ageVal ? `<view class="photo-text age"><text class="val">${ data.ageVal }</text></view>` : ``;
  const dateVal = data.dateVal ? `<view class="photo-text date"><text class="val">${ data.dateVal }</text></view>` : ``;
  const nameHtml = `
  <view class="text-box-name">
    <text class="val-name">${ wx.getStorageSync('userinfo').username }</text>
  </view>
  <view class="text-box">
    ${ nameVal }
    ${ idVal }
    ${ ageVal }
    ${ dateVal }
  </view>`

  let tipsHtml = ``
  const infoVal = data.infoVal.replace(/\n/g, " ")
  const infoArr = drawMultilineText(infoVal, 10, 371);
  if (infoArr.length) {
    infoArr.forEach((item, index) => {
      tipsHtml += `<view class="info-box">
        <text class="info-text">${ item }</text>
      </view>`;
      // style.photoBox.height += 20;
    })
  }
  
  wxml = `<view class="photo-box ${ aspectRatio }">
    <view class="photo-img">
      ${ defaultHtml }

      ${ twelveHtml }
    </view>

    ${ nameHtml }

    ${ tipsHtml }
  </view>`;

  wxmlObj.wxml = wxml;
  wxmlObj.style = style;
  console.error(wxml)
  console.error(style)
  return wxmlObj;
}

// 处理每行数据
const drawMultilineText = (text = "", fontSize = 14, maxWidth = 375) => {
  const textArr = (text ? text.split('') : []); // 将字符串转数组
  const textLines = []; // 处理后的数组
  let textWidth = 0; // 当前行宽度
  let eachRowText = ""; // 当前行数据

  textArr.forEach((item, index) => {
    const chineseChars = /[\u4e00-\u9fa5]/g; // 中文
    const englishChars = /[a-zA-Z]/g; // 英文
    let itemWidth = fontSize;
    if (chineseChars.test(item)) {
      itemWidth = fontSize;
    } else if (englishChars.test(item)) {
      itemWidth = (fontSize * 0.6);
    }

    textWidth += itemWidth;

    if (textWidth > maxWidth) {
      // 当前行字体宽度大于行整体宽度
      textLines.push(eachRowText);
      textWidth = itemWidth;
      eachRowText = item;
    } else if (index === textArr.length - 1) {
      eachRowText += item;
      textLines.push(eachRowText);
    } else {
      eachRowText += item;
    }
  })

  return textLines;
}

module.exports = {
  wxmlFn
}